import './CourseItem.scss'
import { useNavigate } from 'react-router-dom'
import { Dropdown, Space, message } from 'antd';
import { EllipsisOutlined,CopyOutlined } from '@ant-design/icons';
import { useEffect } from 'react';
import { deleteCourseAPI } from '@/apis/teacher';
import { useSelector,useDispatch } from 'react-redux';
import { setUserStatus } from '@/store/modules/user';


function CourseItem({ info, randbgk, onCheck, ifChecked, showChangeModal}) {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const { user_status } = useSelector(state => state.user);
    const backgroundStyle = {
        backgroundImage: `linear-gradient(to bottom right,${randbgk.dark}, ${randbgk.light})`,
    }

    function intoCourse() {
        dispatch(setUserStatus({
            ...user_status,
            class_id:info.class_id,
            classname:info.classname,
            menu_content:'课程视频'
        }))
        navigate('/teachercourse');
    }

    // useEffect(()=>{
    //     console.log(ifChecked);
    //     console.log(info);
    // },[])

    const items = [
        {
            label: '打开',
            key: '0',
        },
        {
            label: '删除',
            key: '1',
        },
        {
            label: '重命名',
            key: '2',
        },
    ];

    const handleMenuClick = function (e) {
        const eventArr = [
            intoCourse,
            handleDelete,
            () => {
                showChangeModal(info.class_id,info.classname,'',info.class_invitecode);
            }
        ]

        eventArr[e.key]();
    }


    const MenuProps = {
        items,
        onClick: handleMenuClick
    }

    function handleCheck(){
        onCheck(info.id);
    }

    async function handleDelete(){
        const res = await deleteCourseAPI(info.class_id,user_status.token);
        message.success('删除成功');
        window.location.reload();
    }

    return (
        <div
            className='teacher-course-item'
        >
            <input 
                type='checkbox' 
                onChange={handleCheck}
                checked={ifChecked||false}
            />
            <header
                style={backgroundStyle}
                onClick={intoCourse}
            >
                <h2 className='course-item-name'>{info.classname}</h2>
                <h3 onClick={(e)=>{e.stopPropagation();}} className='course-invite-code'>
                    <span>邀请码：{info.class_invitecode}</span>
                    <button 
                        onClick={async()=>{
                            await navigator.clipboard.writeText(info.class_invitecode);
                        }}
                    ><CopyOutlined /></button>
                </h3>
            </header>
            <Dropdown
                className='dropdown'
                menu={MenuProps}
            >
                <Space>
                    <EllipsisOutlined />
                </Space>
            </Dropdown>
        </div>
    )
}

export default CourseItem;